<template>
    <div class='team-item'>
        <div class="team-btn" :class="teamClass" @click="chooseTeam(id)"></div>
        <div class="shade" v-show="isShow"  @click="goto()"></div>
        <p>{{ teamNames[index] }}-{{ name }}</p>
    </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: false,
      mychoose: null,
      teamClass: '',
      teamNames: [
        '德国',
        '巴西',
        '比利时',
        '葡萄牙',
        '阿根廷',
        '瑞士',
        '法国',
        '西班牙'
      ]
    }
  },
  props: [ 'id', 'name', 'index', 'chooseId' ],
  methods: {
    chooseTeam (id) {
      this.mychoose = id
      this.$emit('chooseTeam', id)
    },
    goto () {
      this.$emit('goTo')
    }
  },
  watch: {
    chooseId: function (val) {
      this.isShow = val === this.mychoose
    }
  },
  created () {
    this.teamClass = 'ti' + this.index
  }
}
</script>

<style>
.team-item p {
  color:white;
  margin: 0 auto;
  text-align: center;
  font-size: 0.9rem;
}

.ti0 {
  background:url('../assets/team/team_0.png') no-repeat;
  background-size:8.5rem 5.2rem;
}
.ti1 {
  background:url('../assets/team/team_1.png') no-repeat;
  background-size:8.5rem 5.2rem;
}
.ti2 {
  background:url('../assets/team/team_2.png') no-repeat;
  background-size:8.5rem 5.2rem;
}
.ti3 {
  background:url('../assets/team/team_3.png') no-repeat;
  background-size:8.5rem 5.2rem;
}
.ti4 {
  background:url('../assets/team/team_4.png') no-repeat;
  background-size:8.5rem 5.2rem;
}
.ti5 {
  background:url('../assets/team/team_5.png') no-repeat;
  background-size:8.5rem 5.2rem;
}
.ti6 {
  background:url('../assets/team/team_6.png') no-repeat;
  background-size:8.5rem 5.2rem;
}
.ti7 {
  background:url('../assets/team/team_7.png') no-repeat;
  background-size:8.5rem 5.2rem;
}
.team-btn {
  height: 5.2rem;
  width: 8.5rem;
}
</style>
